<template>
  <el-container>
  <el-header><h1>只因酒店欢迎您！</h1>
 
  </el-header>
  <el-main>
   
    <div>
    <el-row :gutter="20">

      <el-col :span="6">
        <div>
            <el-statistic
              group-separator=","
              :precision="0"
              :value="reach"
              title="今日预到人数"
            >
                        <template slot="prefix">
              <i class="el-icon-user-solid
" style="color: red"></i>
            </template>
            <template slot="suffix">
              <i class="el-icon-user-solid
" style="color: blue"></i>
            </template>
            
            </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
                      <el-statistic
              group-separator=","
              :precision="0"
              :value="leave"
              title="今日预离人数"
            >
             <template slot="prefix">
              <i class="el-icon-user
" style="color: red"></i>
            </template>
            <template slot="suffix">
              <i class="el-icon-user
" style="color: blue"></i>
            </template>
            </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic
            group-separator=","
            :precision="0"
            decimal-separator="."
            :value="order"
            title="今日订单"
          >
            <template slot="prefix">
              <i class="el-icon-s-order" style="color: red"></i>
            </template>
            <template slot="suffix">
              <i class="el-icon-s-order" style="color: blue"></i>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic :value="monery" title="今日成交额">
               <template slot="prefix">
              <i class="el-icon-s-claim" style="color: red"></i>
            </template>
            <template slot="suffix">
              元
              <i class="el-icon-s-claim" style="color: blue"></i>
            </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>
    <el-row style="width: 100%; font-weight: bold; top: 20px;" :gutter="10" :sm="24" :lg="24" type="flex">
		<el-col :xs="18" :sm="18">
			<div class="chart-wrapper">
          <bar-chart />
        </div>
		</el-col>
		<el-col :xs="6" :sm="6"></el-col>
	</el-row>
  </div>
   
    <h4>前台地址：http://localhost/front/home</h4>
  </el-main>
</el-container>
</template>

<script>
import { listReserve } from "@/api/data/reserve";
import { listOrder} from "@/api/data/order";
import BarChart from "@/views/dashboard/BarChart.vue"

export default {
  components: {
    BarChart,
},
 data() {
      return {
        like: true,
        leave: null,
        reach: null,
        order: null,
        monery: 0,
        queryParamsJoinTime:{
          joinTime:null,
        },
        queryParamsCheckOutTime:{
          checkOutTime:null,
        },
        queryParamsCreationTime:{
          creationTime: null,
        }
      };
    },
  async created(){
    // 查询今天预到人数
    this.queryParamsJoinTime.joinTime = this.getTIme()
    let responseJoinTime = await listReserve(this.queryParamsJoinTime)
    this.reach = responseJoinTime.total
    // 查询今天预离人数
        this.queryParamsCheckOutTime.checkOutTime = this.getTIme()
    let responseCheckOutTime = await listReserve(this.queryParamsCheckOutTime)
    this.leave = responseCheckOutTime.total
    // 查询订单是今日的
            this.queryParamsCreationTime.creationTime = this.getTIme()
    let responseCreationTime = await listOrder(this.queryParamsCreationTime)
    this.order = responseCreationTime.total
    //计算今天的成交额
    var newSum = 0.0
    responseCreationTime.rows.map(item=>{
      if(item.orderStatus==='1'||item.orderStatus==='2'){
          newSum = newSum+item.amount
      }
    })
    this.monery = newSum
  },
  methods:{
    getTIme(){
         let time = new Date()
    let year = time.getFullYear()
    let month = time.getMonth()+1
    let day = time.getDate()
    return year+'-'+month+'-'+day
    }
  }
}
</script>

<style  lang="scss" scoped>
/* container */
  .el-header {
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  
  .el-main {
    color: #333;
    text-align: center;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  // 数据统计
  .like {
    cursor: pointer;
    font-size: 25px;
    display: inline-block;
  }
</style>